<template>
  <div>
    <m-waterfall :data="pexelsList" nodeKey="id" :colum="5" :picturePreReading="true">
      <template v-slot="{ item, width }">
        <item-vue :data="item"></item-vue>
      </template>
    </m-waterfall>
  </div>
</template>
<script setup>
import { getPexlesList } from "@/api/pexels";
import itemVue from "./item.vue";

import { ref } from "vue";

//构建数据请求
let query = {
  page: 1,
  size: 20
};
const pexelsList = ref([]);
const getPexlesData = async () => {
  const res = await getPexlesList(query);
  pexelsList.value = res.list;
};
getPexlesData();
</script>
